<template>
   <a-modal  :width='700'  :bodyStyle='{padding:0 }' centered  
      :visible="visible" 
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      footer=''
   > 
      <img src='static/img/login_bg.jpg' width="350" height="400" alt='登录' v-if='!Global.currentDevice'>
      <div class=' login_box' :class='{fr:!Global.currentDevice}'>
        <a-tabs v-model='currentNav'    @change='(val)=>changeNav(val)'>
          <a-tab-pane :tab="AllData.account.title" key="1"  >
              <a-form v-if='currentNav==1' :form="form"   @submit="handleSubmit" class='mt20 '> 
                <a-form-item  :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                      <span slot="label"><a-icon type="user" /></span>
                      <a-input  v-decorator="['loginName',{rules:[{required:true,message:AllData.account.vali_name}]}]"  :placeholder=AllData.account.vali_name />
                </a-form-item> 
                <a-form-item  :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                      <span slot="label"><a-icon type="lock" /></span>
                      <a-input  v-decorator="['password',{rules:[{required:true,message:AllData.account.vali_pass}]}]"  :placeholder = AllData.account.vali_pass  type='password' />
                </a-form-item> 
                <a-form-item  class='pl30 pr30'>
                  <a-button type='primary' html-type="submit" class='w-100' >{{AllData.login}}</a-button> 
                </a-form-item>
                <span class='fr link' @click='jump_to_register()'>{{AllData.register}}</span>
              </a-form>
          </a-tab-pane>
          <a-tab-pane :tab="AllData.mobile.title" key="2" forceRender>
              <a-form v-if='currentNav==2' :form="form"   @submit="handleSubmit" class='mt20'> 
                  <a-form-item  :label=AllData.mobile.mobile  :label-col="{ span: 7}" :wrapper-col="{ span: 17 }"> 
                        <a-input  v-decorator="['mobile',{rules:[{required:true,message:AllData.mobile.vali_mobile}]}]"  :placeholder=AllData.mobile.vali_mobile />
                  </a-form-item> 
                  <a-form-item  :label=AllData.mobile.imgCode :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }"> 
                       <a-input   v-decorator="[ 'captchaCode', { rules: [{ required: true, message: AllData.mobile.vali_imgCode },{ whitespace : true ,message:AllData.mobile.vali_whitespace}]}]" :placeholder=AllData.mobile.imgCode  style='width: 80px;margin-right: 10px;' @change='Re_verifyCode'/>
                        <img :src='captchaImg' alt='图形验证码'  height="40"  class='cursor mr20'  @click='change_captchaImg()'> 
                  </a-form-item> 
                  <a-form-item  :label=AllData.mobile.mobileCode :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
                      <a-input   v-decorator="['verifyCode',{ rules: [{ required: true, message:AllData.mobile.vali_imgCode }]}]"  :placeholder=AllData.mobile.vali_imgCode style='width: 80px;margin-right: 10px;' /> 
                      <a-button class='mr20' :disabled='verifyCode_disabled'  @click='get_verifyCode()' >
                        <span v-if='Re_verifyCode_status'>{{reciprocal}}s{{AllData.mobile.require}}</span>
                        <span v-else>{{AllData.mobile.acquireCode}}</span>
                      </a-button> 
                  </a-form-item>

                  <a-form-item  class='pl30 pr30'>
                      <a-button type='primary' html-type="submit" class='w-100' >{{AllData.login}}</a-button> 
                  </a-form-item>
                  <span class='fr link' @click='jump_to_register'>{{AllData.register}}</span>
                  <!-- <a-form-item  >
                        <a-input  v-decorator="['loginName',baseform.loginName]"  placeholder='用户名，请用英文或数字组合'/> 
                  </a-form-item> 
                  <a-form-item  >
                        <a-input  v-decorator="['loginPassword',{initialValue:'', rules:[{required:true,message:'请输入密码'}]}]" placeholder='密码' type='password'/>
                  </a-form-item> 
                  <a-form-item  >
                        <a-button type='primary' html-type="submit" class='w-100' >注册</a-button>
                  </a-form-item> -->
              </a-form>
          </a-tab-pane> 
        </a-tabs> 
      </div> 
      <registerForm :visible='register_visible' ref='register_form'  v-on:CancelRegi='closeLogin() '></registerForm>
   </a-modal>
</template>

<script>
import { login,register,login_of_mobile,getVerifyCode }  from '@/api/common'
import  registerForm  from  '@/components/register'
export default {
  name: 'loginForm',
  props:{
    visible:{
      type:Boolean,
      default:false,
    },
    language:Object
  },
  data () {
    return { 
        confirmLoading:false,
        baseform:{
          loginName:{initialValue:'', rules:[{required:true,message:'请输入用户名'}]},
          // password:{initialValue:'', rules:[{required:true,message:'请输入密码'}]},
        },
        currentNav:'1',
        register_visible:false,

        captchaImg:'',
        captchaCode:'',//图形验证码 v-model for_require_mobileCode
        random:null,//获取图片验证码 和短信验证码 的同一随机数 
        verifyCode_disabled:true,
        Re_verifyCode_status:false,//验证码获取状态 是否正在获取中
        reciprocal:60,//30s后重新获取
        IntervalNum:null,
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){
    this.change_captchaImg()
  },
  methods:{ 
    handleCancel(){
      this.form.resetFields()
      this.currentNav = '1'
      this.$emit('handleCancel')
    },
    changeNav(val){
      this.currentNav=val 
      this.form.resetFields()
    },
    handleSubmit(e){ 
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) { 
          console.log('Received values of form: ', values); 
          if(this.currentNav == 1){ 
            login(values).then(res=>{  
                this.$message.success('登录成功') 
                //save-token - sessionStorage
                sessionStorage.setItem('token', res.data.token)
                this.$store.commit("settoken",res.data.token)
                this.$store.commit("setusername",res.data.username)

                this.handleCancel() 
            }).catch(err=>{
                console.log(err)
            })
          }
          if(this.currentNav == 2){ 
            login_of_mobile(values).then(res=>{  
                this.$message.success('登录成功') 
                //save-token - sessionStorage
                sessionStorage.setItem('token', res.data.token)
                this.$store.commit("settoken",res.data.token)
                this.$store.commit("setusername",res.data.username)
 
                clearInterval(this.IntervalNum)
                this.reciprocal=60
                this.Re_verifyCode_status = false

                this.handleCancel()   
            }).catch(err=>{
                console.log(err)
            })
          } 
        }
      });
    },
    jump_to_register(){
        this.register_visible=true 
        this.$refs.register_form.$emit('open',this.language.commonComponent.register)
        this.handleCancel()
    },
    closeLogin(){
      this.register_visible=false
      this.verifyCode_disabled = true
    },

    //get_captchaImg
    change_captchaImg(){   
      this.random = Math.random()
      this.captchaImg = process.env.BASE_API+'/verify/get_captcha?requestCode='+this.random
    },
    //get_verifyCode
    get_verifyCode(){
      this.verifyCode_disabled = true

      let mobile = this.form.getFieldValue('mobile')
      let captchaCode = this.form.getFieldValue('captchaCode')
      getVerifyCode(mobile,2,captchaCode,this.random).then((res)=>{
        if(res.data.flag == true){
            this.$message.success(res.data.msg) 
            this.Re_verifyCode_status = true
            this.IntervalNum = setInterval(()=>{ 
                this.reciprocal-- 
                if(this.reciprocal<=0){
                  clearInterval(this.IntervalNum)
                  this.reciprocal=60
                  this.Re_verifyCode_status = false
                  this.Re_verifyCode()
                } 
            },1000)
        }
        else{
            this.verifyCode_disabled = false
        }
      }).catch((error)=>{
        // console.log(error)
        this.change_captchaImg()
        this.verifyCode_disabled = false
      })
    },
    //手机验证码 （手机号 图形验证码都填写时显示）
    Re_verifyCode(){ 
      let mobile = this.form.getFieldValue('mobile') 
      let captchaCode = this.form.getFieldValue('captchaCode') 
      if(mobile && captchaCode!=''){
        console.log(1111111)
          this.verifyCode_disabled = this.Re_verifyCode_status==false? false:false 
      }
      else{
        console.log(222222)
          this.verifyCode_disabled =  true
      } 
      console.log(this.verifyCode_disabled)
    }, 
  },
  components:{
    registerForm
  },
  computed:{
    AllData(){
        return this.language.commonComponent.loginForm
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>  
.login_box{padding: 30px 20px 12px;width: 50%}

/*移动端适配*/
@media(max-width: 420px){   
  .login_box{width: 100%} 
}
</style>
